<template>
	<view class="page-index">
		<image :src="shopInfo.avatar" mode="aspectFill" class="bg"></image>
		<view class="mask content">
			<view class="header">
				<u--image :showLoading="true" :src="shopInfo.avatar" width="120rpx" height="120rpx" shape="circle">
				</u--image>
				<view class="right">
					<span class="name">{{shopInfo.name}}</span>
					<span class="other">区块链： {{shopSpace.address}}</span>
					<span class="other">空间类型： {{shopSpace.type_name}}</span>
				</view>
			</view>
			<view class="discribe">
				{{shopInfo.description}}
			</view>
			<view class="tags">
				<view class="tag" v-for="item in shopSpace.tag_name_list" :key="item">
					{{item}}
				</view>
			</view>
		</view>
		<view class="fans">
			<view class="fs">
				<span>{{getFans}}</span>
				<span>粉丝</span>
			</view>
			<view class="focus">
				<span>{{getFollows}}</span>
				<span>关注</span>
			</view>
		</view>
		<view class="card-container">
			<view class="catalog-tabs">
				<u-tabs :current="current" :list="catalogList" lineColor="#E7CDB2" :scrollable="false"
					@change="changeTab"></u-tabs>
			</view>
			<view style="padding: 20rpx;" v-if="current == 0">
				<custom-waterfalls-flow ref="waterfallsFlowRef" @wapperClick="wapperClick" @imageClick="wapperClick"
					:value="list">
					<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
						<view class="title u-line-2">{{item.summary}}</view>
						<view class="desc">
							<u--image :showLoading="true" :src="shopInfo.avatar" width="30rpx" height="30rpx"
								shape="circle"></u--image>
							<span>{{item.name}}</span>
						</view>
					</view>
				</custom-waterfalls-flow>
				<u-loadmore :status="status" loadingText="空间加载中..." />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cloneDeep
	} from 'loadsh'
	import {
		albumListApi,
		workListApi
	} from '@/api'
	export default {
		onLoad() {
			this.getWorkList()
		},
		onShow() {
			uni.showTabBar()
		},
		computed: {
			getFans() {
				if (!this.shopInfo.fans_list) {
					return 0
				}
				const fans = this.shopInfo.fans_list.split(',')
				return fans.length || 0
			},
			getFollows() {
				if (!this.shopInfo.following_list) {
					return 0
				}
				const follows = this.shopInfo.following_list.split(',')
				return follows.length || 0
			},
		},
		data() {
			return {
				catalogList: [{
					name: '笔记',
				}, {
					name: '收藏',
				}],
				current: 0,
				status: 'loading',
				list: [],
				shopInfo: uni.getStorageSync('shop_u_info'),
				shopSpace: uni.getStorageSync('shop_u_space'),
				pager: {
					page: 1,
					limit: 10
				}
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.pager.page += 1
				this.getWorkList()
			}
		},
		methods: {
			wapperClick(e) {
				uni.navigateTo({
					url: `/pages/gallery/subs/gallery-detail/gallery-detail?id=${e.id}&name=${e.name}`
				})
			},
			getWorkList() {
				workListApi({
					album: this.shopSpace.id,
					...this.pager
				}).then(res => {
					console.log(res);
					this.list.push(...res.data.map((item => {
						item.image = item.cover
						return item
					})))
					if (this.list.length == res.total) {
						this.status = 'nomore'
					}
				})
			},
			changeTab({
				index
			}) {
				this.current = index
			}
		}
	}
</script>

<style scoped lang="scss">
	$height:290px;

	.catalog-tabs {
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 0 30%;
	}

	.page-index {
		background-color: $uni-bg-color-grey;
		min-height: 100vh;
		box-sizing: border-box;

		.fans {
			background-color: #3E3029;
			display: flex;
			align-items: center;
			color: #fff;
			position: fixed;
			left: 0rpx;
			top: $height;
			width: calc(100% - 40rpx);
			padding: 20rpx 20rpx;

			&>view {
				display: flex;
				flex-direction: column;
				text-align: center;
				padding: 20rpx;
				margin-right: 20rpx;

				&>span:first-child {
					font-size: 28rpx;
					font-weight: bold;
				}

				&>span:last-child {
					font-size: 20rpx;
					margin-top: 5rpx;
				}
			}
		}

		.content {
			color: #fff;
			padding: 0 40rpx;
			position: relative;

			.discribe {
				width: calc(100% - 0rpx);
				margin-top: 20rpx;
				font-size: 24rpx;
				text-align: justify;
			}

			.tags {
				display: flex;
				gap: 20rpx;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.tag {
					padding: 5rpx 20rpx;
					background-color: #675b56;
					border-radius: 40rpx;
					color: #fff;
					font-size: 20rpx;
					min-width: 40rpx;
					text-align: center;
				}
			}

			.header {
				display: flex;
				align-items: center;
				margin-top: calc(44px + 50px);

				.right {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;

					.other {
						font-size: 20rpx;
						margin-bottom: 5rpx;
					}

					.name {
						font-size: 28rpx;
						margin-bottom: 15rpx;
						font-weight: bold;
					}
				}
			}
		}

		.title {
			font-size: 24rpx;
		}

		.bg {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			height: $height;
			z-index: 22;
		}

		.mask {
			width: calc(100% - 80rpx);
			position: fixed;
			top: 0;
			left: 0;
			height: $height;
			z-index: 88;
			background: linear-gradient(to bottom, transparent, #3E3029);
		}

		.search {
			padding: 20rpx;
			background-color: #fff;
		}

		.grid-container {
			padding: 40rpx 0;
			background-color: #fff;

			img {
				width: 70rpx;
				height: 70rpx;
			}



			.grid-text {
				color: $uni-text-color;
				margin-top: 15rpx;
			}
		}

		.card-container {
			background-color: $uni-bg-color-grey;
			position: relative;
			top: calc(#{$height} + 67px);
			left: 0;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			z-index: 99999;


			.item {
				padding: 20rpx;
			}
		}

		.desc {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			span {
				margin-left: 10rpx;
				font-size: 20rpx;
				color: #666;
			}
		}
	}
</style>
